<template>
  <div>
    <div v-if="flag == 0" style="padding: 10px">
      <!-- 筛选输入，选择 -->
      <header style="margin-top: 10px">
        <div style="margin-top: 10px; margin-bottom: 10px">
          <el-input
            v-model="forms.user_name"
            placeholder="请输入订单号"
            style="width: 200px"
          />
          <el-input
            v-model="forms.customer_name"
            placeholder="请输入用户姓名"
            style="width: 200px; margin-left: 10px"
          />
          <el-input
            v-model="forms.course_name"
            placeholder="请输入用户手机号"
            style="width: 200px; margin-left: 10px"
          />
          <el-button style="margin-left: 10px" type="primary" @click="search">
            搜索
          </el-button>
          <el-button style="margin-left: 10px" type="primary" @click="Reset">
            重置
          </el-button>
        </div>
      </header>

      <main style="margin-top: 15px">
        <!-- 标签页 -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane
            v-for="items of commodityLabel"
            :key="items"
            :label="items"
            :name="items"
          >
            <!-- elements表格 -->
            <el-table
              :cell-style="{ 'text-align': 'center' }"
              :data="tableData"
              :empty-text="emptyText"
              :header-cell-style="{ 'text-align': 'center' }"
              style="width: 100%; margin-top: 15px"
            >
              <!-- 自定义表头 -->
              <el-table-column
                label="商品"
                prop="goods_name"
                show-overflow-tooltip=""
              />
              <el-table-column label="买家" prop="customer_info" />
              <el-table-column label="订单金额(元)" prop="pay_amount" />
              <el-table-column label="退款金额(元)" prop="refund_amount" />
              <el-table-column label="申请时间" prop="updated_at" />
              <el-table-column label="售后状态" prop="verify_status_name" />
              <el-table-column align="left" label="操作">
                <template slot-scope="scope">
                  <div>
                    <el-button
                      v-permissions="{ permission: ['view:AfterOrder'] }"
                      type="text"
                      @click="details(scope.row)"
                    >
                      详情
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </main>

      <el-pagination
        v-if="total >= 10"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    <div v-if="flag == 1">
      <AfterSale :after-id="afterId" @showMain="showMain" />
    </div>
  </div>
</template>

<script>
  import { afterList } from '@/api/order'
  import AfterSale from './components/afterSale.vue'

  export default {
    components: {
      AfterSale,
    },
    data() {
      return {
        afterId: '',
        flag: 0,
        emptyText: ' ',
        tableData: [], // 存放后端获取到的商品列表信息
        forms: {},
        page: 1, // 用作请求商品列表时的分页参数
        pagesize: 10, // 控制分页显示的页码数
        total: '',
        // 商品标签页
        commodityLabel: ['全部', '待处理', '待收货'],
        activeName: '全部',
        // 表格功能按钮
      }
    },
    watch: {},
    created() {},
    mounted() {
      this.init()
    },
    methods: {
      init() {
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        const data = {
          pagesize: this.pagesize,
          page: this.page,
        }
        afterList(data).then((e) => {
          this.total = e.data.total
          this.tableData = e.data.data
          loading.close()
          if (e.data.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },
      handleClick() {},
      filterTableData() {},
      filterLoading() {},
      search() {},
      Reset() {},
      handleCurrentChange(val) {
        const _this = this
        _this.page = val
        this.init()
      },
      // 详情
      details(e) {
        this.afterId = e.id
        this.flag = 1
      },
      // 返回
      showMain(e) {
        this.flag = e
        this.$nextTick(() => {
          this.init()
        })
      },
      // objectSpanMethod({ row, columnIndex }) {

      // },
    },
  }
</script>

<style scoped>
  .commodity_info_box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
</style>
